dpot-frontend/app/widget/rank/[widgetToken]/page.tsx

'use client';

import { use } from 'react';
import { useDonationHub } from '@/hooks/useDonationHub';
import './style.scss';

type Props = {
	params: Promise<{ widgetToken: string }>;
};

export default function RankPage({ params }: Props) {
	const { widgetToken } = use(params);
	const hubUrl = process.env.NEXT_PUBLIC_API_URL + '/hubs/donation';
	const { ranking } = useDonationHub(widgetToken, hubUrl);

	return (
		<div className="rank-widget">
			<div className="rank-title">후원 순위</div>
			<div className="rank-list">
				{ranking.length === 0 && (
					<div className="rank-empty">순위 데이터 대기 중...</div>
				)}
				{ranking.map(item => {
					const badgeClass = item.rank <= 3 ? `badge-${item.rank}` : 'badge-default';
					return (
						<div key={item.sponsorMemberID} className={`rank-item rank-${item.rank}`}>
							<div className={`rank-badge ${badgeClass}`}>{item.rank}</div>
							<div className="rank-name">{item.sponsorName}</div>
							<div className="rank-amount">{item.totalAmount.toLocaleString()}원</div>
						</div>
					);
				})}
			</div>
		</div>
	);
}